<template>
  <div>
    <!--顶部图片区域-->
    <div>
      <indexTop></indexTop>
    </div>
    <!--导航栏区域-->
    <div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#065279"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" style="margin-left: 10px;">选项1</el-menu-item>
        <el-menu-item index="2" style="margin-left: 10px;">选项2</el-menu-item>
        <el-menu-item index="3" style="margin-left: 10px;">选项3</el-menu-item>
        <el-menu-item index="4" style="margin-left: 10px;">选项4</el-menu-item>
        <el-menu-item index="5" style="margin-left: 10px;">选项5</el-menu-item>
        <el-menu-item index="6" style="margin-left: 10px;">选项6</el-menu-item>
        <el-menu-item index="7" style="margin-left: 240px;" disabled>
          <el-input suffix-icon="el-icon-zoom-in" v-model="input" placeholder=""></el-input>
        </el-menu-item>
        <el-submenu index="8">
          <template slot="title">用户中心</template>
          <el-submenu index="8-1">
            <template slot="title"><i class="el-icon-user-solid"></i>学生中心</template>
            <router-link :to="{ path: '/register',query: {id: '0', name: '学生注册平台'} }">
              <el-menu-item index="8-1-1">学生注册</el-menu-item>
            </router-link>
            <router-link :to="{ path: '/login',query: {id: '1', name: '学生登录平台'}}">
              <el-menu-item index="8-1-2">学生登录</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="8-2">
            <template slot="title"><i class="el-icon-s-custom"></i>评审中心</template>
            <router-link :to="{ path: '/register',query: {id: '2', name: '评审人员注册平台'}}">
              <el-menu-item index="8-2-1">评审人员注册</el-menu-item>
            </router-link>
            <router-link :to="{ path: '/login',query: {id: '3', name: '评审人员登录平台'}}">
              <el-menu-item index="8-2-2">评审人员登录</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="8-3">
            <template slot="title"><i class="el-icon-s-check"></i>管理员中心</template>
            <router-link :to="{ path: '/login',query: {id: '5', name: '管理员登录平台'}}">
              <el-menu-item index="8-3-2">管理员登录</el-menu-item>
            </router-link>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </div>
    <!--轮播图区域-->
    <div style="width: 1200px; height: 360px; margin-left: 154px; margin-top: -1px;">
      <Rotation></Rotation>
    </div>
    <!--通知列表区域-->
    <div style="width: 1200px; margin-left: 155px; margin-top: -50px;">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="address"
        >
        </el-table-column>
      </el-table>
    </div>
    <!--底部区域-->
    <div style="margin-top: 50px;">
      <Bottom></Bottom>
    </div>
  </div>
</template>

<script>
import indexTop from "@/components/indexTop"
import Rotation from "@/components/rotation"
import Bottom from "@/components/bottom"

export default {
  name: "index",
  components: {
    indexTop,
    Rotation,
    Bottom
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      input: '',
      // 此数据应动态渲染
      tableData: [{
        address: '关于公布2022年春季学期家庭经济困难学生认定结果暨申请春季学期国家助学金的通知      2022年04月20日'
      }, {
        address: '关于2022年春季学期家庭经济困难学生认定及动态调整的通知       2022年02月25日 '
      }, {
        address: '关于公布2021年秋季学期家庭经济困难学生认定结果暨收集国家助学金卡号的通知       2021年11月15日'
      }, {
        address: '关于公布2021年春季学期家庭经济困难学生认定结果暨申请春季学期国家助学金的通知     2021年03月23日'
      }, {
        address: '关于申请2020-2021学年 家庭经济困难学生认定和学费缓交的通知      2020年09月02日'
      }, {
        address: '关于公布2019-2020学年第二学期家庭经济困难学生认定结果暨发放2020年春季学期国家助学金的通知      2021年04月21日'
      }]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }

  }
}
</script>

<style scoped>
.el-menu-demo {
  margin-left: 153px;
  margin-right: 150px;
}
</style>
